<template>
	<view>
		<view class="head">
			<view class="box-l">
				<view class="box-t">自动生成货品编码</view>
				<view class="box-b">在上货时会自动生成唯一的货品编码</view>
			</view>
			<view class="box-r">
				<view><switch checked @change="switch1Change" /></view>
			</view>
		</view>
		<view class="head">
			<view class="box-l">
				<view class="box-t">店铺管理员查看客户手机号</view>
				<view class="box-b">店铺管理员是否能查看客户手机号</view>
			</view>
			<view class="box-r">
				<view><switch checked @change="switch2Change" /></view>
			</view>
		</view>
		<view class="head">
			<view class="box-l">
				<view class="box-t">普通员工查看手机号</view>
				<view class="box-b">销售员和仓库是否能查看客户的手机号</view>
			</view>
			<view class="box-r">
				<view><switch checked @change="switch3Change" /></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			kinds:0,
			phone:0,
			user:0
		};
	},
	methods: {
		switch1Change: function(e) {
			if(e.target.value==true){
				this.kinds=1
			}else{
				this.kinds=0
			}
			// console.log('switch1 发生 change 事件，携带值为', e.target.value);
		},
		switch2Change: function(e) {
			console.log('switch2 发生 change 事件，携带值为', e.target.value);
		},
		switch3Change: function(e) {
			console.log('switch3 发生 change 事件，携带值为', e.target.value);
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
switch {
	transform: scale(0.8);
}
.head {
	height: 157rpx;
	background-color: #ffffff;
	margin-top: 29rpx;
	padding: 30rpx 40rpx;
	display: flex;
	justify-content: space-between;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	box-sizing: border-box;
	.box-b {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 19rpx;
	}
}
</style>
